/* 
  学习目标：校验上传文件格式

*/

import React, { useState } from 'react';
import { Button, message, Modal, Upload } from 'antd';
import { UploadOutlined } from '@ant-design/icons';
import { baseURL } from 'utils/request';
import { getToken } from 'utils/storage';

export default function Test() {
  const props = {
    // 接受上传的文件类型，选择时只展示 .png,.jpg,.jpeg
    accept: '.png,.jpg,.jpeg',
    // 由后台接口决定的上传文件类型
    name: 'image',
    // 上传的接口地址
    action: `${baseURL}/v1_0/upload`,
    // 请求头
    headers: {
      Authorization: `Bearer ${getToken()}`,
    },
    // 上传会触发的钩子函数：上传中、上传完成、上传失败
    onChange(info) {
      if (info.file.status !== 'uploading') {
      }
      if (info.file.status === 'done') {
        message.success(`${info.file.name} 图片上传成功`);
      } else if (info.file.status === 'error') {
        message.error(`${info.file.name} 图片上传失败`);
      }
    },
    onPreview(file) {
      setPreImage(file.thumbUrl);
    },
    beforeUpload(file) {
      const isAllowType = ['image/png', 'imag/jpg', 'image/jpeg'].includes(file.type);
      if (!isAllowType) {
        message.warning('不允许上传的文件类型');
        // 👍 返回 Upload.LIST_IGNORE，不在其前端显示，不发请求
        // 返回false不发请求，仍在前端显示。
        return Upload.LIST_IGNORE;
      }
      return true;
    },
  };

  const [preImage, setPreImage] = useState('');

  return (
    <div>
      <Upload listType="picture-card" {...props}>
        <Button icon={<UploadOutlined />}></Button>
      </Upload>
      {/* 不要把Modal放在Upload组件内，会冒泡触发到Upload的点击事件 */}
      <Modal
        title="预览图片"
        visible={!!preImage}
        footer={null}
        centered
        onCancel={() => setPreImage('')}
      >
        <img src={preImage} alt="" style={{ objectFit: 'cover', width: '100%' }} />
      </Modal>
    </div>
  );
}
